{extend name="public/menu2" /}
{block name='title'}-{$cur.name}{/block}

{block name='content'}
<div class="right_content">
    <p class="cell_title">{$content[0]['title']}<span>:::</span></p>
    <div id="masonry">
        <div class="left">

        </div>
        <div class="right">

        </div>
    </div>
</div>
</div>

<div class="cell">
    <div class="cell_content">
        <p class="cell_title">{$content[1]['title']}<span>:::</span></p>
        <div class="img_box">
            {$content[1]['content']['content']|raw}
        </div>
    </div>
</div>
{/block}

{block name='script'}

<style>
    #masonry {
        overflow: hidden;
        position: relative;
    }

    #masonry::after {
        content: "";
        width: 0;
        height: 100%;
        border-left: 1px solid #8f000b;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        margin: auto;
    }

    .left {
        float: left;
    }

    .right {
        padding-top: 60px;
        float: right;
    }

    .box {
        box-sizing: border-box;
        margin-bottom: 60px;
        padding: 20px;
        width: 480px;
        border: 1px solid #ededed;
        position: relative;
    }

    .left .box::before {
        content: "";
        box-sizing: border-box;
        width: 20px;
        height: 20px;
        background-color: #fff;
        border: 1px solid #ededed;
        border-bottom: none;
        border-left: none;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        position: absolute;
        right: -10px;
        top: 30px;
    }

    .right .box::before {
        content: "";
        box-sizing: border-box;
        width: 20px;
        height: 20px;
        background-color: #fff;
        border: 1px solid #ededed;
        border-top: none;
        border-right: none;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        position: absolute;
        left: -10px;
        top: 30px;
    }

    .left .box::after {
        content: "";
        box-sizing: border-box;
        padding: 3px;
        width: 17px;
        height: 17px;
        background-color: #8f000b;
        background-clip: content-box;
        border: 1px solid #8f000b;
        border-radius: 50%;
        position: absolute;
        right: -54px;
        top: 30px;
    }

    .right .box::after {
        content: "";
        box-sizing: border-box;
        padding: 3px;
        width: 17px;
        height: 17px;
        background-color: #8f000b;
        background-clip: content-box;
        border: 1px solid #8f000b;
        border-radius: 50%;
        position: absolute;
        left: -55px;
        top: 30px;
    }

    .box .year {
        font-size: 34px;
        color: #8f000b;
    }

    .box ul {
        overflow: hidden;
    }

    .box li {
        display: flex;
        margin: 30px 0;
        font-size: 14px;
    }

    .box .month {
        font-size: 34px;
    }

    .box span:not(.month) {
        margin-left: 4px;
        padding-top: 7px;
        line-height: 1;
    }

    .box p:not(.year) {
        flex: 1;
        margin-left: 20px;
        padding-top: 2px;
        line-height: 1.5;
    }
    #content .cell {
        padding: 60px 0;
        background-color: #f0f0f0;
    }

    #content .cell .cell_content {
        box-sizing: border-box;
        margin: auto;
        padding-left: 150px;
        width: 1200px;
        overflow: hidden;
    }
</style>

<script>
    $(function () {
        var data = {$content[0]['content']|raw|json_encode};
        // 年份
        data.forEach(function (event) {
            // 月份事件列表
            var month_arr = event.event;
            var lis = "";
            month_arr.forEach(function (e) {
                var month = e.month;
                lis +=
                    '<li>\
                        <span class="month">' + month +
                    '</span>\
                            <span>月</span>\
                            <p>' +
                    e.txt + '</p>\
                        </li>';
            });
            // 获取左右两个容器的高度，哪个高度小新的模块就加到哪个里面
            var left_w = $("#masonry .left")[0].clientHeight;
            var right_w = $("#masonry .right")[0].clientHeight;
            if (left_w <= right_w) {
                var left_html =
                    '<div class="box">\
                        <p class="year">' + event.year +
                    '</p>\
                        <ul>' + lis +
                    '</ul>\
                    </div>';
                $("#masonry .left").append(left_html);
            } else {
                var right_html =
                    '<div class="box">\
                        <p class="year">' + event.year +
                    '</p>\
                        <ul>' + lis +
                    '</ul>\
                    </div>';
                $("#masonry .right").append(right_html);
            }
        })

    })
</script>
{/block}